<!DOCTYPE html>
<html lang="es">
  <head>
  <meta charset="UTF-8" />
  <title>Proyecto ABP</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="style/style.css" rel="stylesheet" type="text/css" />
  <script src=""></script>
  <script src="https://unpkg.com/htmx.org@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>
  </head>
  <body>

    <nav>
      <div class="almondale">
        <div>
          <img src="img/almondale.png" alt="LA" />
        </div>
	<div class="sidebar"></div>
        <div><h3>The Almondale School Valle</h3></div>
      </div>
    <% if (user !== undefined) { %>
      <% if (user.admin === true) { %>
        <a href="views/admin.ejs">Administrate</a>
      <% } %>
    <% } %>
        <a>Proyecto</a>
        <a>¡Saber mas!</a>
        <a>Contacto</a>
	<% if (!user) { %>
        <a id="buttonSpan" href="/login" class="btn trans google-login" style="color:black; text-decoration:none;">
	<p>Autorizarse con<div><img src="img/google-icon.svg" /></div></p></a>
	<% } else { %>
	<a href="/profile"> <img src="" alt="<%= user.username %>" width="80" height="80">aqui esta</a>
	<% } %>
    </nav>
    <div class="content">
      <div class="content-column">
        <h2><a>OPINIONES POPULARES</a></h2>
    <% for(i = 1; i <= 10; i++) { %>
	<div>
	  <div class="rating">
            <h4><%= i %> &emsp;2024-07-15</h4>
	    <div>
	      <ion-icon class="arrow-up btn trans opi" name="caret-up-outline"></ion-icon>
	      <ion-icon class="arrow-down btn trans opi" name="caret-down-outline"></ion-icon>
	    </div>
	  </div>
	  <article>
            Tengo un punto de vista perspectivo y la democracia en periodo
            escolar es algo importante<a href="">...ver mas</a>
          </article>
	</div>
     <% } %>
      </div>
      <div class="">
        <div>
          <% if(user !== undefined) {%>
          <form method="POST" action="/api/user">
            <textarea
              type="text"
	            class="trans"
              name="com"
              placeholder="Escribe tu opinión..."
              size="2000"
              required
            ></textarea>
              <button class="btn trans" type="submit">Enviar</button>
            <div>
              <p>
                *Para enviar tu opinión anonima es necesario iniciar sesión con
                Google*
              </p>
            </div>
          </form>
          <% } %>
          <p>Si usted quieren enviar su opinion porfavor inician session con google</p>
        </div>
        <div class="info">
          <h2>¿Porque nosotros estamos haciendo esto?</h2>
	  <!-- &emsp; is four spaces like a tab -->
          <p>
            &emsp; Nosotros queremos obtener la opinion de alumnos del otros colegios
            para mejorar nuestro y a ver si funciona blah blah blah... ...
          </p>
        </div>
      </div>
    <div class="content-column">
      <h2><a>OPINIONES RECIENTES</a></h2>
    <% for(i = 1; i <= 10; i++) { %>
	<div>
	  <div class="rating">
            <h4><%= i %> &emsp;2024-07-15</h4>
	    <div>
	      <ion-icon class="arrow-up btn trans opi" name="caret-up-outline"></ion-icon>
	      <ion-icon class="arrow-down btn trans opi" name="caret-down-outline"></ion-icon>
	    </div>
	  </div>
	  <article>
            Tengo un punto de vista perspectivo y la democracia en periodo
            escolar es algo importante<a href="">...ver mas</a>
          </article>
	</div>
     <% } %>
    </div>
    </div>
    <footer>
      <div class="almondale trans">
        <div>
          <img src="img/almondale.png" alt="LA" />
        </div>
	<div class="sidebar"></div>
        <div><a href="#"><h3>The Almondale School Valle</h3></a></div>
      </div>      
    </footer>
    <script
      type="module"
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
    ></script>
  </body>
</html>
